<template>
    <div id="myOrder">
        <div class="tab-title-contetn">
            <van-tabs  v-model="activeTab" swipeable animated>
                <van-tab v-for="(item, index) in orderTabList" :title="item.name" :key="index">
                </van-tab>
            </van-tabs>
        </div>
        <div class="list-contetn">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <div v-for="(item, index) in list" :key="index" class="list-conts" >
                    <div class="left-content">
                        <div>
                            <span class="time">12:00</span>
                            <span class="space-title">芜湖广告产业园</span>
                        </div>
                        <div class="t-middle">
                            <span>-</span>
                            <span>2019-10-10</span>
                            <span>时长6小时</span>
                        </div>
                        <div class="is-now">
                            <span>...</span>
                            <span><i class="now">.</i>正在充电中</span>
                        </div>
                    </div>
                    <div class="right-content">
                        <div class="money"><span class="money-num">1</span>元</div>
                        <div class="money-detail">查看详情</div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
	import {deviceBigCategory,consumeList} from '../../api/order.js'
	import { getLocalStorage } from '@/utils/auth';
    export default {
        name: "myOrder",
        data() {
            return {
                orderTabList: [
                    {name: '全部'},
                    {name: '电瓶车'},
                    {name: '洗车集'},
                    {name: '充电器'}
                ],
                orderList: [],
				activeTab:'全部',
                list: [],
                loading: false,
                finished: false
            }
        },
        mounted() {
			this.getEquipment()
			this.getConsumeList()
        },
        methods: {
			//获取设备
			getEquipment(){
				const t=this
				t.indexList=[]
				deviceBigCategory({
						pageIndex: 1,
						pageSize:4,
						level:1
					})
					.then(res => {
						if (res.success) {
						this.orderTabList=res.data
						this.orderTabList.unshift({name: '全部',code:''})
							} else {
							 this.$toast(res.message)
						}
					})
			},
			
			//获取列表
			getConsumeList(){
				const t=this
				t.indexList=[]
				consumeList({
						pageIndex: 1,
						pageSize:10,
						memberId:getLocalStorage('openId')
					})
					.then(res => {
						if (res.success) {
					
							} else {
							 this.$toast(res.message)
						}
					})
			},
			
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 500);
            }
        }
    }
</script>

<style scoped lang="scss">
    #myOrder {
        .list-contetn {
            padding: 0 16px;
            .list-conts {
                margin-top: 16px;
                border-radius: 10px;
                height: 80px;
                background: #fff;
                font-size: 12px;
                padding: 15px 0;
                vertical-align: top;
                .left-content {
                    display: inline-block;
                    width: 80%;
                    font-size: 14px;
                    .time {
                        padding: 20px;
                    }
                    .place-title {
                        padding: 20px;
                    }
                    .t-middle {
                        color: #b8bdc7;
                        span {
                            display: inline-block;
                            text-align: center;
                            &:nth-child(1) {
                                width: 25%;
                            }
                            &:nth-child(3) {
                                padding: 0 20px;
                            }
                        }
                    }
                    .is-now {
                        padding: 5px;
                        span {
                            display: inline-block;
                            text-align: center;
                            &:nth-child(1) {
                                width: 23%;
                            }
                            &:nth-child(2) {
                                width: 75%;
                                text-align: left;
                            }
                        }
                        .now {
                           color: #3cc4f4;
                            font-size: 28px;
                        }
                    }
                }
                .right-content {
                    display: inline-block;
                    width: 20%;
                    text-align: center;
                     vertical-align: top;
                    .money {
                        font-weight: 500;
                        font-size: 14px;
                        margin-bottom: 20px;
                        .money-num {
                            font-size: 30px;
                        }
                    }
                }
            }
        }
    }
</style>
